<%@page import="java.util.List"%>
<%@page import="com.jfinal.plugin.activerecord.Page"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
<!-- Basic -->
		<meta charset="UTF-8">
		<meta name="keywords" content="HTML5 Admin Template" />
		<meta name="description" content="Porto Admin - Responsive HTML5 Template">
		<meta name="author" content="okler.net">
		<!-- Mobile Metas -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- Web Fonts  -->
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<link rel="stylesheet" href="../admin/css/statistica/css/animsition.min.css" />
		<link rel="stylesheet" href="../admin/css/statistica/css/drop-down.css" />
		<link rel="stylesheet" href="../admin/css/statistica/css/common.css" />
		<link rel="stylesheet" href="../admin/css/statistica/css/xsfx.css" />
		<link rel="stylesheet" href="../admin/css/statistica/jedate/skin/jedate.css" />
		<link rel="stylesheet" href="../admin/css/statistica/css/jquery-labelauty.css" />
</head>
<body>
	<div class="data_wrap" style="background: #efeff5; width: 1020px; padding: 10px;">
	    <div class="animsition" style="overflow: hidden;">
			<div class="my_duxs_time">
		    	<!-- 付款时间：<input class="datainp wicon" id="inpstart" type="text" placeholder="开始日期" value=""  readonly>
						<input class="datainp wicon" id="inpend" type="text" placeholder="结束日期"   readonly>
						付款时间：<select id="sp_select">
							<option value="商品ID">商品ID</option>
							<option value="商品名称">商品名称</option>
						</select>
						<input id="search" type="text" />
						<div id="city_1" class="inline">
							<select class="prov"></select> 
							<select class="city"></select>
						</div>
				省份名称：<div id="city_2" class="inline">
							<select class="prov"></select> 
							<select class="city"></select>
						</div> -->
				<select id="sf_select" style = "display:none">
					<option value="china">全国省份排名</option>
				</select>
				<!-- <div class="chebox_wrap">
					交易来源：
					<label class="my_label"><input type="checkbox" value="shouji" name="shouji"/> 手机网页聚划算</label>
					<label class="my_label"><input type="checkbox" value="shouji" name="shouji"/> 手机客户端聚划算</label>
					<label class="my_label"><input type="checkbox" value="shouji" name="shouji"/> PC聚划算</label>
					<label class="my_label"><input type="checkbox" value="shouji" name="shouji"/> 手机客户端</label>
					<label class="my_label"><input type="checkbox" value="shouji" name="shouji"/> 手机客户端</label>
					<button id="my_search">搜索</button><span class="src_span">最近一周</span><span class="src_span">最近一个月</span>
				</div> -->
		    </div> 
		    	<div class="map_title">客户地区分布图</div>
		    	<div id="main1" style="width: 510px; height: 350px; float: left;"></div>
		    	<div class="my_main" id="main2" style="width: 510px; height: 350px; float: left;"></div>
	    </div>
	</div>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="../admin/js/statistica/jquery-labelauty.js"></script>
	<script src="../admin/js/statistica/jquery.cityselect.js"></script>
	<script src="../admin/css/statistica/jedate/jquery.jedate.min.js"></script>
	<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
	<script src="../admin/js/statistica/select-widget-min.js"></script>
	<script src="../admin/js/statistica/jquery.animsition.min.js"></script>
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	<script src="../admin/js/statistica/macarons .js"></script>
	<script src="../admin/js/statistica/common.js"></script>
	<script src="../admin/js/statistica/sq_data.js"></script>
	<script>
		$(document).ready(function() {
			//获取省份
			var val = $('#sf_select').val();
			//插件初始化
			$(":checkbox").labelauty({
				checked_label: "",
				unchecked_label: ""
			});
			$(":radio").labelauty();
			//联动下拉
			/**
			$("#city_1").citySelect({
				url:{"citylist":[
						{"p":"新老客户","c":[{"n":"不限"},{"n":"新客户"},{"n":"老客户"}]},
						{"p":"级别","c":[{"n":"LV-0"},{"n":"LV-1"},{"n":"LV-2"},{"n":"LV-3"},{"n":"LV-4"}]}
					]},
				prov:"新老客户",
				city:"不限"
			});
			$("#city_2").citySelect({
			url:{"citylist":[
					{"p":"全国省份排名","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
					{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
					{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
				]},
			prov:"全国省份排名",
			city:"",
			dist:"",
			nodata:"none"
		});
			**/
			
		    //调用日期
		    /*var start = {
			    format: 'YYYY-MM-DD',
			    //minDate: '2014-06-16 23:59:59', //设定最小日期为当前日期
			    festival:true,
			    //isinitVal:true,
			    maxDate: $.nowDate(0), //最大日期
			    choosefun: function(elem,datas){
			        end.minDate = datas; //开始日选好后，重置结束日的最小日期
			    }
			};
			var end = {
			    format: 'YYYY-MM-DD',
			    //minDate: $.nowDate(0), //设定最小日期为当前日期
			    festival:true,
			    //isinitVal:true,
			    maxDate: '2099-06-16 23:59:59', //最大日期
			    choosefun: function(elem,datas){
			        start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
			    }
			};
			$("#inpstart").jeDate(start);
			$("#inpend").jeDate(end);*/
			
			  //初始化切换
		  $(".animsition").animsition({
		  
		    inClass               :   'fade-in-right',
		    outClass              :   'fade-out',
		    inDuration            :    1500,
		    outDuration           :    800,
		    linkElement           :   '.animsition-link',
		    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
		    loading               :    true,
		    loadingParentElement  :   'body', //animsition wrapper element
		    loadingClass          :   'animsition-loading',
		    unSupportCss          : [ 'animation-duration',
		                              '-webkit-animation-duration',
		                              '-o-animation-duration'
		                            ],
		    overlay               :   false,
		    
		    overlayClass          :   'animsition-overlay-slide',
		    overlayParentElement  :   'body'
		  });
			function my_data(){
				var data = [];
				for( var i =0; i<30; i++){
					data.push(Math.round(Math.random() * (500 - 100) + 100));
				};
				return data;
			}
		   	//省份信息
		   	var sf_data = [
	            {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '天津',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                {name: '重庆',value: Math.round(Math.random()*1000)},
                {name: '河北',value: Math.round(Math.random()*1000)},
                {name: '河南',value: Math.round(Math.random()*1000)},
                {name: '云南',value: Math.round(Math.random()*1000)},
                {name: '辽宁',value: Math.round(Math.random()*1000)},
                {name: '黑龙江',value: Math.round(Math.random()*1000)},
                {name: '湖南',value: Math.round(Math.random()*1000)},
                {name: '安徽',value: Math.round(Math.random()*1000)},
                {name: '山东',value: Math.round(Math.random()*1000)},
                {name: '新疆',value: Math.round(Math.random()*1000)},
                {name: '江苏',value: Math.round(Math.random()*1000)},
                {name: '浙江',value: Math.round(Math.random()*1000)},
                {name: '江西',value: Math.round(Math.random()*1000)},
                {name: '湖北',value: Math.round(Math.random()*1000)},
                {name: '广西',value: Math.round(Math.random()*1000)},
                {name: '甘肃',value: Math.round(Math.random()*1000)},
                {name: '山西',value: Math.round(Math.random()*1000)},
                {name: '内蒙古',value: Math.round(Math.random()*1000)},
                {name: '陕西',value: Math.round(Math.random()*1000)},
                {name: '吉林',value: Math.round(Math.random()*1000)},
                {name: '福建',value: Math.round(Math.random()*1000)},
                {name: '贵州',value: Math.round(Math.random()*1000)},
                {name: '广东',value: Math.round(Math.random()*1000)},
                {name: '青海',value: Math.round(Math.random()*1000)},
                {name: '西藏',value: Math.round(Math.random()*1000)},
                {name: '四川',value: Math.round(Math.random()*1000)},
                {name: '宁夏',value: Math.round(Math.random()*1000)},
                {name: '海南',value: Math.round(Math.random()*1000)},
                {name: '台湾',value: Math.round(Math.random()*1000)},
                {name: '香港',value: Math.round(Math.random()*1000)},
                {name: '澳门',value: Math.round(Math.random()*1000)}
            ]
		   	//排名前十前10的数据
	   		var sf_data10
		   	var sf10_value
		   	var sf10_name
		   	var zw_json = {name :'-',value : 0};
		   	var len
		   	Sort_10(sf_data)
		   	function Sort_10(data){
		   		sf_data10 = [];
			   	sf10_value = [];
			   	sf10_name = [];
			   	len = data.length;
			   	
			   	for(var i=0; i<len; i++){
			   		sf_data10[i] = $.extend(true,{}, data[i]);
			   	}
			   	console.log(sf_data10.length)
			   	if(len < 10){
			   		for(var i=0; i<(10 - len); i++){
			   			sf_data10.push(zw_json);
			   		}
			   	}
			   	function size(){  
			        var j = sf_data10[0].value;
			        var n = sf_data10[0];
			        var iNow = 0;
			        for (var i=1;i<sf_data10.length ;i++ ){  
			    
			            if(sf_data10[i].value>j){  
			                j = sf_data10[i].value;  
			                iNow = i;
			            }  
			        }
			        return sf_data10.splice(iNow,1);
			    }  
			   	for(var i=0; i<10; i++){
			   		sf10_value.unshift(size()[0]);
			   		sf10_name.unshift(sf10_value[0].name);
			   	}
			   	//console.log(sf_data10)
		   	}
		   	//下拉省份选择
		   	var sf_length = sf_data.length - 1;
		   	var sf_options = '';
		   	for(var i=0; i<sf_length; i++){
		   		sf_options += '<option value="'+ sf_data[i].name +'">'+ sf_data[i].name +'</option>'
		   	}
		   
		   	$('#sf_select').html($('#sf_select').html() + sf_options);
		   	
		    // 路径配置
	        require.config({
	            paths: {
	                echarts: 'http://echarts.baidu.com/build/dist'
	            }
	        });
	        
	        // 使用
	        require(
	            [
	                'echarts',
	                'echarts/chart/bar',
	                'echarts/chart/line',
	                'echarts/chart/pie',
	                'echarts/chart/map',// 使用柱状图就加载bar模块，按需加载
	            ],
	            function (ec) {
	                // 基于准备好的dom，初始化echarts图表
	                var myChart = ec.init(document.getElementById('main1'),'macarons');
	                var myChart2 = ec.init(document.getElementById('main2'),'macarons');
	                var ecConfig = require('echarts/config');
					var zrEvent = require('zrender/tool/event');
					var curIndx = 0;
					var sf_mapTypeControl = {}
					
					$('#sf_select').on('change',function(){
						 val = $(this).val();
						 sf_mapTypeControl = {};
						 sf_mapTypeControl[val] = true;
						 /*if(val == 'china'){
						 	Sort_10(sf_data);
					 	 	 myChart.setOption({
							 	 roamController: {
							        mapTypeControl: sf_mapTypeControl
							 	 },
							 	 series : [{
								 	 	mapType: val,
								 	 	data: sf_data
								 	 }]
								 });
							 
							 myChart2.setOption({
							 	 yAxis : [
								        {
								            data : sf10_name
								        }
								    ],
							 	 series : [{
								 	 	data: sf10_value
								 	 }]
								 });
						 }
						 else{
						 	 Sort_10(sq_data[val]);
						 	 myChart.setOption({
					 	 		roamController: {
						        	mapTypeControl: sf_mapTypeControl
						     	},
							 	 series : [{
								 	 mapType: val,
								 	 	data: sq_data[val]
								 	}]
								 });
							 myChart2.setOption({
							 	 yAxis : [
								        {
								            data : sf10_name
								        }
								    ],
							 	 series : [{
								 	 	data: sf10_value
								 	 }]
								 });
						 }*/
						
					});
					
					function change_value(){
						if(val == 'china'){
						 	Sort_10(sf_data);
					 	 	 myChart.setOption({
							 	 roamController: {
							        mapTypeControl: sf_mapTypeControl
							 	 },
							 	 series : [{
								 	 	mapType: val,
								 	 	data: sf_data
								 	 }]
								 });
							 
							 myChart2.setOption({
							 	 yAxis : [
								        {
								            data : sf10_name
								        }
								    ],
							 	 series : [{
								 	 	data: sf10_value
								 	 }]
								 });
						 }
						 else{
						 	 Sort_10(sq_data[val]);
						 	 myChart.setOption({
					 	 		roamController: {
						        	mapTypeControl: sf_mapTypeControl
						     	},
							 	 series : [{
								 	 mapType: val,
								 	 	data: sq_data[val]
								 	}]
								 });
							 myChart2.setOption({
							 	 yAxis : [
								        {
								            data : sf10_name
								        }
								    ],
							 	 series : [{
								 	 	data: sf10_value
								 	 }]
								 });
						 }
					}

		             var option = {
		             	backgroundColor : '#f3fffe',
					    tooltip : {
					        trigger: 'item'
					        //formatter: '滚轮切换或点击进入该省<br/>{b}'
					    },
					    legend: {
					    	show : false,
					        orient: 'vertical',
					        x:'right',
					        data:['客户数量']
					    },
					    dataRange: {
					        min: 0,
					        max: 1000,
					        y:'top',
					        //color:['orange','yellow'],
					        text:['高','低'],           // 文本，默认为数值文本
					        calculable : true
					    },
					      roamController: {
					      	width : 60,
					      	height : 90,
					        show: true,
					        x: 'left',
					        y:'bottom',
					        mapTypeControl: {
					            'china': true
					        }
					    },
					    series : [
					        {
					            name: '客户数量',
					            type: 'map',
					            mapType: val,
					            selectedMode : 'single',
					            scaleLimit : {
					            	min : 0.5,
					            	max : 2
					            },
					            mapLocation :{
					            	x : 'right'
					            },
					            itemStyle:{
					                normal:{label:{show:true}},
					                emphasis:{label:{show:true}}
					            },
					            data:sf_data
				        },
				       
					    ]
					};
					
					var option2 = {
						backgroundColor : 'white',
						title:{
		        			text : '排名前10',
		        			x : 48,
		        			y : 15,
		        			textStyle : {
		        				fontSize : 12
		        			}
		        		},
					    tooltip : {
					        trigger: 'axis'
					    },
					    grid :{
					    	y: 55,
					    	y2: 80
					    },
					    legend: {
					    	show : true,
					    	y : 'bottom',
					        borderWidth: 1,
					        padding: 8,   
					        data:['人数']
					    },
					    toolbox: {
					        show : true,
					        y: 15,
					        itemSize : 12,
					        feature : {
					            //mark : {show: true},
					            dataView : {show: true},
					            //magicType: {show: true, type: ['line', 'bar']},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : true,
					    xAxis : [
					        {
					            type : 'value',
					            boundaryGap : [0, 0.01]
					        }
					    ],
					    yAxis : [
					        {
					            type : 'category',
					            data : sf10_name
					        }
					    ],
					    series : [
					        {
					            name:'人数',
					            type:'bar',
					            barMaxWidth : 10,
					            itemStyle: {
								    normal: {
								        color : '#36a2ef'
								    }
								},
					            data:sf10_value
					        }
					    ]
					};

	                // 为echarts对象加载数据 
	                myChart.setOption(option); 
	                myChart2.setOption(option2); 
			        
			        change_value();
			        
		            }
		        );
		   
				//关闭提示
				$('.xsfx_tips  i').on('click',function(){
					$(this).parent().slideUp();
				})
		
		});
	</script>
</body>
</html>